<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 布局练习</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <header>
        <h1>CSS 布局练习</h1>
    </header>
    <main>
        <section>
            <h2>float布局</h2>
            <p>使用float属性进行布局，虽然比较繁琐，但非常灵活，可以实现各种复杂的布局。</p>
        </section>
        <section>
            <h2>flexbox</h2>
            <p>Flex box布局模型的主要目的是提供更有效率的布局方式，尤其是当容器内元素的尺寸不固定的时候更能表现出它的优势。它能够自动识别子元素的尺寸，从而为盒装模型提供更高的灵活性。</p>
            <div id="flexbox">
                <p>001001001001001001001</p>
                <p>001001001001001001001</p>
                <p>001001001001001001001</p>
                <p>002002002002</p>
                <p class="fz-5">003</p>
                <p>004</p>
                <p>005</p>
                <p>006</p>
                <p>007</p>
                <p>008</p>
                <p>009</p>
                <p>010</p>
                <p>011</p>
                <p>012</p>
            </div>
        </section>
        <section>
            <h2>column</h2>
            <p>分栏布局提供了一种将内容按列排列的方法，就像在报纸上看到的那样。但是创建的列不能单独设置样式，无法使一列比其他列大，或更改单个列的背景或文本颜色。</p>
            <div id="column">
                <p>1 column-count 属性用来设置列的数量。浏览器可以计算并分配每个列的空间。</p>
                <p class="break-avoid">2 column-width 属性用来指定列的宽度。浏览器将为提供指定大小的列。然后，剩余的空间将在现有列之间共享。</p>
                <p>3 column-gap 属性用来更改列之间的间距大小。</p>
                <p>4 column-rule 属性用来指定列之间的边框，接受同border的值。</p>
                <p>5 column-span 属性可以实现元素跨越所有栏。值为none和all。多栏会中断，并在跨栏元素之后继续创建新的列框集。</p>

            </div>
        </section>
        <section id="grid">
            <header>这里放置导航条 </header>
            <article>
                <h1>文章标题</h1>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Distinctio maiores commodi, ipsa possimus
                    voluptatibus perspiciatis, maxime exercitationem id eveniet beatae architecto, eos iure recusandae
                    reiciendis numquam sed reprehenderit rem dolores.</p>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iure provident vero nisi eos, mollitia
                    ducimus!
                    Minus quos, nam perferendis inventore nesciunt quibusdam consectetur vitae. Illum, accusamus? Est
                    dignissimos nam eligendi.
                    Et exercitationem natus, vitae rem in, magni hic culpa molestias aspernatur esse corrupti molestiae
                    tenetur, quas error ad voluptatem similique quibusdam. Omnis et voluptatibus iusto asperiores
                    voluptatum
                    error reiciendis! Nemo.
                    Commodi officiis exercitationem dignissimos. Ratione deleniti nesciunt harum vitae alias! Ipsa,
                    voluptas
                    illo. Deleniti aspernatur incidunt mollitia repudiandae praesentium, doloribus nulla autem velit
                    adipisci ab quam officiis. Animi, quam deleniti.</p>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iure provident vero nisi eos, mollitia
                    ducimus!
                    Minus quos, nam perferendis inventore nesciunt quibusdam consectetur vitae. Illum, accusamus? Est
                    dignissimos nam eligendi.
                    Et exercitationem natus, vitae rem in, magni hic culpa molestias aspernatur esse corrupti molestiae
                    tenetur, quas error ad voluptatem similique quibusdam. Omnis et voluptatibus iusto asperiores
                    voluptatum
                    error reiciendis! Nemo.
                    Commodi officiis exercitationem dignissimos. Ratione deleniti nesciunt harum vitae alias! Ipsa,
                    voluptas
                    illo. Deleniti aspernatur incidunt mollitia repudiandae praesentium, doloribus nulla autem velit
                    adipisci ab quam officiis. Animi, quam deleniti.</p>
            </article>
            <aside>
                <h2>侧边栏</h2>
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quos odio, enim iure ratione sed
                    perspiciatis
                    veniam, consequuntur eum illum voluptas tenetur ducimus. Optio, ducimus cumque maxime dolorem veniam
                    est
                    ipsam.</p>
            </aside>
            <footer>这里放置版权信息等内容</footer>
        </section>
    </main>
    <footer>
        <p><span>《网页设计与制作》</span><span>学号：P171717177 </span><span>指导教师：yangzh</span></p>
    </footer>
</body>

</html>
